<template>
	<view class="comB-container">
		<text
			style="font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; display: block;">子组件B</text>

		<view class="value-show" style="margin-bottom: 30rpx; padding: 20rpx; background: #fff; border-radius: 5rpx;">
			<text style="font-size: 30rpx; color: #666;">子组件A传进来的值:</text>
			<text style="font-weight: bold; color: blue; margin-left: 20rpx; font-size: 30rpx;">
				{{ result || '暂无子A传递值' }}
			</text>
		</view>
		<view class="input-group" style="margin-bottom: 30rpx; display: flex; align-items: center;">
			<text style="font-size: 32rpx; color: #666;">回传值:</text>
			<input type="text" v-model="callbackValue" style="flex: 1; margin-left: 20rpx; border: 1px solid #ddd; padding: 15rpx; border-radius: 5rpx; font-size:
			30rpx;" placeholder="请输入回传值（如0595-2788888）" />
		</view>
		<button @click="sendToParent" type="warn" style="width: 100%; height: 80rpx; font-size: 32rpx;"
			:disabled="!callbackValue.trim()">
			回传值给父组件
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: '', // 存储兄弟组件A传递的值
				callbackValue: '' // 存储要回传给父组件的值
			};
		},
		// 1. 生命周期钩子：组件创建时监听全局事件（接收兄弟A的传值）
		created() {
			console.log("---子组件B---监听兄弟A传值事件");
			// 监听子A触发的全局事件getIntent，接收传递的值
			this.eventHandler = uni.$on('getIntent', (msg) => {
				console.warn("---子组件B---接收子A传递值：", msg);
				this.result = msg; // 更新兄弟传值变量，页面实时展示
			});
		},
		// 2. 生命周期钩子：组件卸载时移除事件监听（避免内存泄漏，PPT重点强调）
		onUnload() {
			console.log("---子组件B---移除全局事件监听");
			uni.$off('getIntent', this.eventHandler); // 移除全局事件监听
		},
		methods: {
			// 3. 向父组件回传值（子→父回传核心：通过this.$emit触发自定义事件）
			sendToParent() {
				console.warn("---子组件B---向父传递回传值：", this.callbackValue);

				// 触发父组件绑定的callBackFun事件，携带回传值
				this.$emit('callBackFun', this.callbackValue.trim());

				// 可选：回传后重置输入框（提升用户体验）
				this.callbackValue = '';

				// 可选：添加回传成功提示
				uni.showToast({
					title: "回传成功",
					icon: "success",
					duration: 1500
				});
			}
		}
	};
</script>

<style scoped>
	.comB-container {
		display: flex;
		flex-direction: column;
	}
</style>